<template>
  <view>
    <view class="searchGood">
      <view class="search acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <span class="iconfont icon-sousuo2"></span>
          <form @submit.prevent="submit"></form>
          <input type="text" placeholder="点击搜索商品" v-model="search" />
          <view class="bnt" @click="submit">搜索</view>
        </view>
      </view>
      <view v-if="keywords.length" class="hotSearch">
        <view class="title">
          <image mode="widthFix" src="https://h5.ylsp.vip/file/static/icon-22.png" alt="" />
        </view>
        <view class="list acea-row">
          <view
            class="item"
            v-for="(item, index) in keywords"
            :key="index"
            @click="toSearch(item)"
          >
            <span
              :class="
                index == 0
                  ? 'color_v1'
                  : index == 1
                  ? 'color_v2'
                  : index == 2
                  ? 'color_v3'
                  : 'color_v4'
              "
              >{{ index + 1 }}</span
            >
            <span>{{ item }}</span>
            <span class="heat">搜索热度 5万+</span>
            <span class="icon"
              ><image
                v-if="index == 0"
                src="https://h5.ylsp.vip/file/static/icon-23.png"
                alt=""/>
              <image
                v-if="index == 1"
                src="https://h5.ylsp.vip/file/static/icon-24.png"
                alt=""/>
              <image
                v-if="index == 2"
                src="https://h5.ylsp.vip/file/static/icon-25.png"
                alt=""
            /></span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getSearchKeyword } from "@/api/store";
import { trim } from "@/utils";
export default {
  name: "GoodSearch",
  components: {},
  data: function() {
    return {
      keywords: [],
      search: ""
    };
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    submit() {
      const search = trim(this.search) || "";
      if (!search) return;
      this.toSearch(search);
    },
    toSearch(s) {
      this.$yrouter.push({ path: "/pages/shop/GoodsList/index", query: { s } });
    },
    getData() {
      getSearchKeyword().then(res => {
        this.keywords = res.data;
      });
    }
  }
};
</script>
<style lang="less">
.searchGood {
	background-color: #f9f9f9;
	.search {
		padding-top: 30rpx;
		.input {
			width: 100%;
			background-color: #ffffff;
			border-radius: 33rpx;
			padding: 0 35rpx;
			margin: 0 30rpx;
			height: 80rpx;
			position: relative;
			input {
				width: 90%;
				font-size: 28rpx;
			}
			input::placeholder {
				color: #bbb;
			}
			
			.iconfont {
				color: #000;
				font-size: 35rpx;
			}
		}
		
		
		.bnt {
			width: 120rpx;
			text-align: center;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 30rpx;
			color: #ffffff;
			position: absolute;
			right: 30rpx;
			z-index: 100;
			border-radius: 50rpx;
			background: #ff3334;
		}
	}
	
	.title {
		font-size: 28rpx;
		color: #999;
		margin: 50rpx 30rpx 25rpx 20rpx;
		
		image {
			width: 200rpx;
		}
	}
	
	.list {
		padding-left: 0.1rpx;
		.item {
			font-size: 33rpx;
			color: #000000;
			height: 60rpx;
			width: 100%;
			padding-left: 30rpx;
			border-radius: 3rpx;
			line-height: 60rpx;
			font-weight: 600;
			display: block;
			margin-bottom: 10rpx;
			position: relative;
			
			span {
				font-size: 33rpx;
				font-weight: 400;
				margin-right: 10rpx;
			}
			
			span.heat {
				font-size: 24rpx;
				color: grey;
				font-weight: 400;
			}
			
			span.icon {
				position: absolute;
				height: 40rpx;
				width: 40rpx;
				right: 30rpx;
				top: 5rpx;
				
				image {
					height: 100%;
					width: 100%;
				}
			}
			
			.color_v1 {
				color: #f39e04;
			}
			
			.color_v2 {
				color: #aeafb0;
			}
			.color_v3 {
				color: #c4925c;
			}
			
			.color_v4 {
				color: #fb9d4d;
			}
		}
	}
	
	.hotSearch {
		background-color: #ffffff;
	}
	
	.line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}
}
</style>
